<template>
  <div>
    <div v-for="(item, index) in $slots.default" :key="index">
      <ElBreadcrumbIte :to="$slots.default[index].componentOptions.propsData.to"
        ><span v-html="arr[index]"></span
      ></ElBreadcrumbIte>
      <i
        v-if="separatorClass && index < arr.length - 1"
        :class="separatorClass"
      ></i>
      <span v-if="!separatorClass && index < arr.length - 1">{{
        separator
      }}</span>
    </div>
    <!-- <span> <slot> </slot>/ </span> -->
  </div>
</template>
<script>
import ElBreadcrumbIte from "./el-breadcrumb-ite.vue";
export default {
  name: "",
  components: {
    ElBreadcrumbIte,
  },
  props: {
    separator: {
      type: String,
      default: "/",
    },
    separatorClass: {
      type: String,
    },
  },
  data() {
    return {
      arr: [],
    };
  },
  created() {},
  mounted() {
    console.log(this.$slots.default);
    const arr = this.$slots.default.map((item) => {
      if (item.componentOptions.children[0].tag) {
        console.log(1);
        return `<${item.componentOptions.children[0].tag}>${item.componentOptions.children[0].children[0].text}</${item.componentOptions.children[0].tag}>`;
      } else {
        return item.componentOptions.children[0].text;
      }
    });
    this.arr = arr;
  },
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
* {
  display: flex;
  margin-right: 20px;
}
/deep/a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    color: skyblue;
  }
}
</style>
